<template>
    <div class="home-singer">
        <h3>热门歌手</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index" @click="selectItem(item)">
                    <div class="cover">
                        <van-image :src="item.singer_pic" radius="1rem" />
                    </div>
                <span>{{ item.singer_name }}</span>
                </li>
            </ul>
        </div>
    </div>


</template>


<script>
import {betterScrollHorizontal} from '../../common/betterScroll.js';
    export default{
        data() {
      return {
        listData: [],
      };
    },
        created(){
            this.getData();
        },
      methods:{
        getData(){
            this.$request("get", "/singer/list",{
            }).then((res) => {
            console.log(res);
            this.listData = res.data.list;
          //调用横向滚动的方法
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10
            )
        });
    },
    selectItem(item){
      // console.log(item)
      const singermid = item.singer_mid;
      //调用状态管理，commit提交唤醒mutations
      // this.$store.commit('saveSinger',item)
      //调用状态管理，通过分发action方法
      this.$store.dispatch('saveSinger',item)
      this.$router.push(`/singer/${singermid}`);
      
    }
      },
}

</script>


<style scoped>
 .wrapper{
    width: 100%;/*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
  }
  ul.content > li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
  }
  ul.content > li *{
    margin:0 0.1rem;
  }
  ul.content >li > span{
    font-size: 0.8rem;
    color: #625858;
  }

</style>